<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>18_Media</title>
	<base target="blank">
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
			z-index: 9999;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			max-width: 1000px;
			margin: auto;
			position: relative;
		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}
		
		section{
			position: relative;
			margin:50px auto;
		}
		section>h2{
			margin-bottom: 25px;
			text-align: center;
		}
		/*------------------------------jd-----------------------------------*/
		body,html{
			min-width: 100%;
			min-height: 100%;
			height: 100%;
		}
		.desk{
			margin:0;
			padding: 0;
			height: 100%;
			background: url('image/body.gif') repeat ;
		}
		.desk > .menu{
			position: fixed;
			top:20%;
			left: 50%;
			background-color: #fff;
			box-shadow: 1px 1px 5px #000;
			display: none;
			z-index: 999999999;
		}
		.desk > .menu > ul{
		}
		.desk > .menu > ul > li{
			padding: 10px;
			width: 200px;
			border-bottom: 1px solid #ccc;
			font-size: 16px;
			cursor: pointer;
		}
		.desk > .menu > ul > li > img{
			border:none;
			vertical-align:middle;
			outline: none;
			padding-right: 10px;
		}
		.desk > .menu > ul > li > span{
			
		}
		.desk > .menu > ul > li:hover{
			background-color: #009999;
		}
		.desk > nav{
			position: relative;
			height: 100%;
		}
		.desk > nav > .tag{
			position: absolute;
			box-sizing: border-box;
			padding: 70px 30px 50px;
			width: 294px;
			height: 310px;
			z-index: 1;
		}
		.desk > nav > .tag > textarea{
			width: 100%;
			height: 100%;
			outline: none;
			border:none;
			font-size: 18px;
			resize: none;
		}
		.desk > nav > .tag > span{
			position: absolute;
			bottom: 20px;
			text-align: center;
			left: 0;
			right: 0;
			margin:auto;
			font-size: 14px;
		}
		.desk > nav > .tag.bg1{
			background-image: url('image/1.png');
		}
		.desk > nav > .tag.bg2{
			background-image: url('image/2.png');
		}
		.desk > nav > .tag.bg3{
			background-image: url('image/3.png');
		}
		.desk.on{
			background-image:url('image/bg.jpg');
		}
		.desk > .menu.on{
			display: block;
		}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
	<section class="desk">
		<div class="menu">
			<ul>
				<li><img src="image/ico1.jpg" alt=""><span>添加应用</span></li>
				<li><img src="image/ico2.jpg" alt=""><span>添加便签</span></li>
				<li><img src="image/ico3.jpg" alt=""><span>清除便签</span></li>
				<li><img src="image/ico4.jpg" alt=""><span>刷新</span></li>
				<li><img src="image/ico5.jpg" alt=""><span>保存标签</span></li>
				<li><img src="image/ico6.jpg" alt=""><span>更换背景</span></li>
				<li><img src="image/ico7.jpg" alt=""><span>注销</span></li>
			</ul>
		</div>
		<nav></nav>
	</section>
	<script>
		(function () {
			var desk = document.querySelector('.desk');
			var menu = document.querySelector('.desk > .menu');
			var btns = document.querySelectorAll('.desk > .menu > ul > li'),
				length = btns.length;
			var box = document.querySelector('.desk > nav');

			window.oncontextmenu = function(e){
				e = e || window.evnet;
				e.preventDefault();
				var x = e.clientX;
				var y = e.clientY;
				menu.style.left = x +'px';
				menu.style.top = y +'px';
				menu.classList.add('on');
				this.onclick = function(){
					if(e.target !== menu){
						menu.classList.remove('on');
					}
				};
			};

			for (var i = 0; i < length; i++) {
				btns[i].index = i;
				btns[i].onclick = function(e){
					e = e || e.event;
					var self = this;
					json[this.index](e);
					menu.classList.remove('on');
				};
			}

			init2();
			function init2(){
				window.addEventListener('storage',function(e){
					
					box.innerHTML = e.newValue;

					var oldData = box.querySelectorAll('div');
					for(var i=0;i<oldData.length;i++){
						oldData[i].ondragstart = function(e){
							drag(e,this);
						};
						oldData[i].onmouseenter = function(){
							show(this);				
						};
					}
				});

			}

			init();
			function init(){
				var notes = window.localStorage.getItem('notes');
				if(notes){
					box.innerHTML = notes;
				}
				var oldData = box.querySelectorAll('div');
				for(var i=0;i<oldData.length;i++){
					oldData[i].ondragstart = function(e){
						drag(e,this);
					};
					oldData[i].onmouseenter = function(){
						show(this);				
					};
				}
			}
			function drag(e,self){
				e = e || window.event;
				var _x = e.clientX;
				var _y = e.clientY;
				e.dataTransfer.setData('div', 'i');
				e.dataTransfer.effectAllowed = 'move';
				
				self.ondragend = function(e){
					e = e || e.window.event;
					var x = e.clientX - _x + this.offsetLeft;
					var y = e.clientY - _y + this.offsetTop;
					x = Math.min(x,box.clientWidth-294);
					y = Math.min(y,box.clientHeight-310);
					this.style.left = x + 'px';
					this.style.top = y +'px';
				};
			}

			function show(self){
				var flag = true;
				self.style.zIndex = 9;
				self.children[0].onfocus = function(){
					this.style.zIndex = 10;
					flag = false;
					this.onblur = function(){
						this.parentNode.style.zIndex = 1;
					};
				};						
				self.onmouseleave = function(){
					if(flag){
						this.style.zIndex = 1;
					}
				};		
			}

			var json = {
				'0': function(){//添加应用
					alert('敬起期待...');
				},
				'1': function(e){//添加便签

					var x = e.clientX;
					var y = e.clientY;
					x = Math.min(x,box.clientWidth-294);
					y = Math.min(y,box.clientHeight-310);
					var frag = document.createDocumentFragment();
					var obj = document.createElement('div');

					obj.style.top = y -40 +'px';
					obj.style.left = x + 'px';
					obj.classList.add('tag');
					obj.classList.add('bg'+(~~(Math.random()*3)+1));
					obj.draggable = 'ture';

					obj.ondragstart = function(e){
						drag(e,this);
					};

					obj.onmouseenter = function(){
						show(this);				
					};

					frag.appendChild(obj);
					obj = document.createElement('textarea');
					frag.children[0].appendChild(obj);
					obj = document.createElement('span');
					obj.innerText = '上传保存';
					frag.children[0].appendChild(obj);
					
					box.appendChild(frag);
				},
				'2': function(){//清除便签
					var notes = box.querySelectorAll('.tag');
					var index = notes.length-1;
					box.removeChild(notes[index]);
				},
				'3': function(){//刷新
					window.location.reload();
				},
				'4': function(){//上传资料
					box = document.querySelector('.desk > nav');
					
					window.localStorage.setItem('notes', box.innerHTML);
				},
				'5': function(){//更换背景
					desk.classList.toggle('on');
				},
				'6': function(){//注销
					window.localStorage.clear();
				}
			};
		})();
	</script>
</body>
</html>